* {
	padding: 0;
	margin: 0;
}

.animate-tabbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.333333rem;
	display: flex;
	flex-direction: row;
	box-shadow: 0 -0.133333rem 0.133333rem rgba(200,200,200,0.1);
	&__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 100%;
		background: #fff;
	}
	&__icon {
		width: 0.96rem;
		height:0.96rem;
		display: block;
		margin: 0 auto;
	}
	&__text {
		text-align: center;
		font-size:0.32rem;
		width: 100%;
		max-height: 100%;
		color: rgb(210, 210, 210);
	}
	&__star {
		transform-origin: 70px 20px;
		opacity: 0;
		fill:rgb(253,96,0);
	}
	&__circle {
		transform-origin: 7px 60px;
		opacity: 0;
		fill:rgb(108,99,255);
	}
}
// 首页图标，默认
.main{
		&__home {
			fill:rgb(210,210,210);
			transform-origin: center bottom;
		}
		&__search {
			fill:none;
			stroke-width:4;
			stroke:#fff;
			stroke-dasharray: 148;
		}
	}
	// 分类图标，默认
.cate{
	&__default{
		fill:rgb(210,210,210);
	}
	&__circle{
		&--out{
			opacity: 0;
			transform-origin: 80px 80px;
		}
		&--inner{
			opacity: 0;
			transform-origin: 36px 36px;
		}
	}
}	
// 发现图标，默认
.found{
	&__bg{
		opacity: 0;
		&--light{
			transform: translate(16px,11px) scaleX(1);
		}
	}
	&__line01{
		stroke-dasharray: 18;
		stroke-dashoffset: 0;
	}
	&__line02{
		stroke-dasharray: 11;
		stroke-dashoffset: 0;
	}
	&__line03{
		stroke-dasharray: 37;
		stroke-dashoffset: 0;
	}
}
// 我的学习 图标
.study{
	&__bg{
		fill:rgb(210,210,210);
	}
	&__xline{
		transform-origin: right bottom;
	}
	&__play{
		&--hide{
			transform-origin: top;
			opacity: 0;
		}
	}
}
// 我的图标，默认
.me{
	&__eye01{
		transform-origin: center bottom;
	}
	&__eye02{
		transform-origin: center bottom;
	}
	&__body{}
	&__bodygroup{
		transform-origin: center bottom;
	}
	&__mouth{
		stroke-dasharray: 15;
		stroke-dashoffset: 15;
	}
}
.is-active{
	.animate-tabbar{
		&__text {
			color: rgb(91, 91, 91);
		}
		&__star {
			animation: fade 0.7s ease-in-out 0.2s forwards;
		}
		&__circle {
			animation: fade 0.7s ease-in-out 0.4s forwards;
		}
	}
	&.animate-tabbar__item{
		animation: tabbarBg .3s ease-in-out;
	}
	.main{
		&__home {
			animation: homeBounce 0.8s ease-in-out forwards;
		}
		&__search {
			stroke-dashoffset: 148;
			animation: stroke 0.5s ease-in-out 0.8s forwards;
		}
	}
	.cate{
		&__default{
			opacity: 0;
		}
		&__circle{
			&--out{
				stroke:rgb(91, 91, 91);
				animation: cateCircle 0.8s ease-in-out forwards;
			}
			&--inner{
				fill: rgb(91, 91, 91);
				animation: cateCircle 0.8s  ease-in-out 0.3s forwards;
			}
		}
	}
	.found{
		&__bg{
			opacity: 1;
			&--light{
				animation: foundBgMove 0.8s ease-in-out forwards;
			}
		}
		&__line01{
			stroke-dashoffset: 18;
			animation: stroke 0.3s ease-in-out 0.8s forwards;
		}
		&__line02{
			stroke-dashoffset: 11;
			animation: stroke 0.2s ease-in-out 0.9s forwards;
		}
		&__line03{
			stroke-dashoffset: 37;
			animation: stroke 0.5s ease-in-out 1.1s forwards;
		}
	}
	.study{
		&__bg{
			fill:rgb(91, 91, 91);
		}
		&__xline{
			// transform:translate(-300px,-10px) rotate(90deg) scaleX(0.5);
			animation: xline 1s ease-in-out forwards;
		}
		&__play{
			&--hide{
				animation: playFade 0.5s ease-in-out forwards;
			}
		}
	}
	.me{
		&__eye01{
			animation: eye01 1s linear forwards;
		}
		&__eye02{
			animation: eye02 1s linear forwards;
		}
		&__body{}
		&__bodygroup{
			animation: body 1s ease-in-out forwards;
		}
		&__mouth{
			animation: stroke 0.3s ease-in-out 1s forwards;
		}
	}
	
}
// 点击背景
@keyframes tabbarBg{
	0%,100%{
		background: #fff;
	}
	50%{
		background: #ddd;
	}
}

// 描边显示动画
@keyframes stroke {
	100% {
		stroke-dashoffset: 0;
	}
}
// 显隐动画
@keyframes fade {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	50% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(2);
	}
}
// 首页图标弹跳动画
@keyframes homeBounce {
	0% {
		transform: scaleY(1);
	}
	1% {
		fill: rgb(91, 91, 91);
	}
	30% {
		transform: scale(1, 0.8);
	}
	70% {
		transform: scale(0.75, 1.15);
	}
	100% {
		fill: rgb(91, 91, 91);
		transform: scale(1, 1);
		
	}
}
// 分类圆动画
@keyframes cateCircle{
	0%{
		opacity: 0;
		transform: scale(0,0);
	}
	70%{
		opacity: 1;
		transform: scale(1.1,1.1);
	}
	100%{
		opacity: 1;
		transform: scale(1,1);
	}
}
// 发现背景移动
@keyframes foundBgMove{
		100%{
			transform: translate(16px,11px) scaleX(0);
		}
}
// 我的body伸缩动画
@keyframes body{
	0%{transform: scaleY(1);}
	50%{transform: scaleY(0.7);}
	80%{transform: scaleY(1.1);}
	100%{transform: scaleY(1);}
}
// 我的眼睛伸缩动画
@keyframes eye01{
	0%{transform: scaleY(1) translate(0,0);}
	50%{transform: scaleY(0.2) translate(4px,40px);}
	80%{transform: scaleY(1) translate(4px,-10px);}
	100%{transform: scaleY(1) translate(4px,0);}
}
@keyframes eye02{
	0%{transform: scaleY(1) translate(0,0);}
	50%{transform: scaleY(0.2) translate(4px,40px);}
	80%{transform: scaleY(1) translate(4px,-10px);}
	100%{transform: scaleY(1) translate(4px,0);}
}

// 我的学习
@keyframes xline{
	0%{opacity: 1;}
	30%{opacity: 0;}
	50%{opacity: 1;}
	100%{transform:translate(-300px,-20px) rotate(-90deg) scaleX(0.5);}
}
// 我的学习-播放按钮显示动画
@keyframes playFade {
	0% {
		opacity: 0;
		transform: translate(19.224px,14.175px) rotate(-30deg) scale(0);
	}
	50% {
		opacity: 1;
		transform:  translate(19.224px,14.175px) rotate(-30deg) scale(1);
	}
	100% {
		opacity: 0;
		transform:  translate(19.224px,14.175px) rotate(-30deg) scale(2);
	}
}